<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="Application">
      <div v-for="item in list" :key="item">{{item}}</div>
      <ul>
        <li v-for="(item, index) in list2" :key="item.name">
          <div>{{ item.name + "." + index }}</div>
          <div>{{ item.num }}</div>
        </li>
      </ul>
      <button @click="click">逆序</button>
      <div v-for="n in 5" v-if="n !== 3">
        重复次数：{{ n }}
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue;
      let config = {
        setup() {
          const list = ref([1, 2, 3, 4, 5]);
          const list2 = ref([
            {name: '辉少', num: '151xxxxxxxx'},
            {name: 'Jaki', num: '151xxxxxxxx'},
            {name: 'Lucy', num: '151xxxxxxxx'},
            {name: 'Bei', num: '151xxxxxxxx'},
          ])
          const click = () => {
            list2.value.reverse()
          }
          return { list, list2, click };
        },
      };
      createApp(config).mount("#Application");
    </script>
  </body>
</html>
